<template>

    <div class="home container">
        <Header></Header>
        <Header2></Header2>

        <div class="block  navel-in">
            <div class="row cc">

                <div class="col-md-8 ">
                    <Banner></Banner>
                </div>
                <!--人气排行榜-->
                <div class="col-md-2 pull-right navel-in" style="width: 250px">
                    <h4 style="font-size: 18px " class="link">热点排行</h4>
                    <ul v-for="(item, index) in navel_list_hot">
                        <li class="li-top text-left">
                            <span style="margin-left: 10px"><router-link :to="'/detail/' + item.id + '/'"
                                                                         style="font-size: 14px;color:rgb(161,177,191)">{{index+1}}.{{item.name}}</router-link></span>
                            <span style="font-size: 14px; padding-right: 5px" class="pull-right">[{{item.category_name}}]</span>
                        </li>
                    </ul>
                    <!--人气排行榜结束-->
                </div>
            </div>
            <a href="https://www.mzitu.com/">
                <img src="@/assets/image/cat_adver.png" alt="">
            </a>
            <RankList></RankList>
            <Footer></Footer>

        </div>
    </div>
</template>

<script>
    // @ is an alias to /src
    import Banner from "../components/Banner";
    import Header from "../components/Header";
    import Header2 from "../components/Header2";
    import Footer from "../components/Footer";
    import RankList from "./RankList";


    export default {
        name: 'Home',

        data() {
            return {
                navel_list_hot: []
            }
        },
        created() {
            this.$axios.get(this.$settings.base_url + '/book/hot/').then(response => {
                this.navel_list_hot = response.data;
                // console.log('this.navel_list_hot:', this.navel_list_hot);
            })
        },
        components: {
            Header,
            Header2,
            Footer,
            Banner,
            RankList,
        }
    }
</script>
<style>
    a[data-v-4fee8824], a[data-v-4fee8824]:link {
        text-decoration: none;
        color: #333;
        font-size: 13px;
    }

    .man-t4-list ul li img[data-v-4fee8824] {
        height: 82px;
        float: left;
        margin: -5px 6px;
    }

    .navel-in {
        margin-top: 20px;
    }

    .li-top {
        border-bottom: 1px solid #CCC;
        font-size: 18px;
        color: #999999;
    }

    .row2 {
        margin-top: 20px;
    }

    .link {

    }

</style>
